<template>
  <div class="layout-padding">
    <div
      class="layout-padding-auto layout-padding-view"
      style="height: 480px; overflow-y: auto; border: 1px solid red"
    >
      <DynamicLink :id="props.id" :path="props.path" />
    </div>
    <footer class="el-dialog__footer">
      <span class="dialog-footer">
        <el-button v-if="props.dialog" type="primary" @click="close"
          >关闭</el-button
        >
        <el-button v-if="data.printInfo" type="primary" @click="printForm"
          >打印</el-button
        >
        <el-button
          v-if="!props.readonly"
          type="primary"
          :disabled="loading"
          @click="saveForm"
          >提交</el-button
        >
      </span>
    </footer>
    <!-- 打印表单 -->
    <el-dialog
      v-model="data.showTinymceView"
      top="20px"
      width="700px"
      :title="data.tinymceTitle"
      append-to-body
      @close="closePrint(false)"
    >
      <!-- <tinymce-view v-if="data.showTinymceView" :currFlowForm="data.currFlowForm"></tinymce-view> -->
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="OrderFlowForm">
import { defineAsyncComponent, onMounted, reactive, ref, watch } from "vue";
import { useMessage } from "@/hooks/message";

const emits = defineEmits(["close", "handleJob"]);
// 引入组件
const DynamicLink = defineAsyncComponent(() => import("./dynamicLink.vue"));
// const TinymceView = defineAsyncComponent(() => import('/@/flow/components/tinymce/TinymceView.vue'))

const props = defineProps({
  id: {
    type: String,
    default: ""
  },
  path: {
    type: String,
    default: ""
  },
  formName: {
    type: String,
    default: ""
  },
  dialog: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  }
});

const loading = ref(false);

const data = reactive({
  showTinymceView: false,
  tinymceTitle: null,
  printInfo: {}
});

const close = () => {
  emits("close");
};

function init() {
  initFormPrint();
}

function initFormPrint() {
  // 处理表单权限
  //handleDesignFormPerm(props, formJson, elTab, form.type, form.formId)
  //handleFormPrint(data.currFlowForm, form.type, form.formId, '1')
}

function printForm() {
  data.tinymceTitle = props.formName;
  data.showTinymceView = true;
}

function closePrint(isSave) {
  if (isSave) {
    delete data.printInfo;
  }
}

async function saveForm() {
  try {
    loading.value = true;
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
}

watch(
  () => props.path,
  () => {
    init();
  }
);
watch(
  () => props.readonly,
  () => {
    init();
  }
);

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.el-dialog__footer {
  padding-top: 0px !important;
  text-align: center;

  .dialog-footer {
    text-align: center;
  }
}
</style>
